<template>
<!--
    让多层背景以不同的速度进行移动
    1、至少需要拥有两层背景（缓慢移动、正常移动）
    2、将背景设置为相对布局（为缓慢移动设置top来缓冲掉 scroll滚动）
    3、监听 Parallax 组件的滑动、根据滑动来计算 缓慢移动区 top 的值
 -->
  <div class="parallax" @scroll="onChangeScroll">
      <!-- 缓慢移动区 -->
      <div class="parallax-slow" :style="{top: slowTop}">
          <slot name="parallax-slot"></slot>
      </div>
      <!-- 正常移动区 -->
      <div class="parallax-content z-index-2">
          <slot></slot>
      </div>
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      // 速度差
      SPEED_DIFF: 2,
      // 页面滑动值
      parallaxScroll: 0
    }
  },
  methods: {
    onChangeScroll: function ($event) {
      this.parallaxScroll = $event.target.scrollTop
      this.$emit('onScrollChange', this.parallaxScroll)
    }
  },
  computed: {
    slowTop: function () {
      // 当前页面滑动距离 / 速度差 = 缓慢移动区应该滑动的距离
      // 当前页面的滑动距离 - 缓慢移动区应该滑动的距离 = 缓慢移动区用来缓冲掉 scroll 的值

      return this.parallaxScroll - (this.parallaxScroll / this.SPEED_DIFF) + 'px'
    }
  }

}
</script>

<style lang="scss" scoped>
    @import '@css/style.scss';

    .parallax {
        width: 100%;
        height: 100%;
        overflow: hidden;
        overflow-y: auto;

        &-slow {
            width: 100%;
            position: relative;
        }

        &-content {
            width: 100%;
            position: relative;
        }
    }

</style>
